<template>
  <div>
    <el-card>
      <el-form>
        <div class="demo-input-size">
          <el-select slot="prepend" placeholder="场地类型" v-model="queryInfo.name">
            <el-option :label="item" :value="item" v-for="(item,index) in init.name" :key='index'></el-option>
          </el-select>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-select slot="prepend" placeholder="时间" v-model="queryInfo.time">
            <el-option :label="item" :value="item" v-for="(item,index) in init.time" :key='index'></el-option>
          </el-select>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-date-picker
            v-model="queryInfo.data"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="日期">
          </el-date-picker>
          <!--          <el-input
                      v-model="queryInfo.cost"
                      placeholder="花费小于">
                    </el-input>-->
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-button type="primary" @click="query(1,pageSize,queryInfo)">搜索</el-button>
          <el-button type="warning" native-type="reset" @click="reset(1)">重置</el-button>
          <el-button type="success" @click="isAdd=true">添加场地</el-button>
        </div>

      </el-form>

      <!--表格区-->
      <el-table :data="queryList" border stripe>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="场地名" prop="name"></el-table-column>
        <el-table-column label="地点" prop="site"></el-table-column>
        <el-table-column label="日期" prop="data"></el-table-column>
        <el-table-column label="时间" prop="time"></el-table-column>
        <el-table-column label="余量" prop="remain"></el-table-column>
        <el-table-column label="价格" prop="cost"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" round size="mini" @click="update(scope.row.id)">更新余量</el-button>
            <el-button type="danger" round size="mini" @click="remove(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  分页区-->
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!--    添加场地  -->
    <el-dialog title="添加场地" :visible.sync="isAdd" width="45%" :before-close="add">
      <!--内容主题-->
      <el-form :model="addSpace" label-width="100px" :rules="addFormRule" ref="addSpace">
        <el-form-item label="场地号" prop="no">
          <el-input v-model="addSpace.no"></el-input>
        </el-form-item>
        <el-form-item label="场地名" prop="name">
          <el-input v-model="addSpace.name"></el-input>
        </el-form-item>
        <el-form-item label="场地地点" prop="site">
          <el-input v-model="addSpace.site"></el-input>
        </el-form-item>
        <el-form-item label="花费" prop="cost">
          <el-input v-model="addSpace.cost"></el-input>
        </el-form-item>

        <el-form-item label="日期" prop="data">
          <el-date-picker
            v-model="addSpace.data"
            type="date"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="时间" prop="time">
          <el-time-select
            v-model="startTime"
            :picker-options="{
                          start: '08:30',
                           step: '00:30',
                           end:  '22:00'
                           }"
            placeholder="选择起始时间">
          </el-time-select>
          ---
          <el-time-select
            v-model="endTime"
            :picker-options="{
                          start: '08:30',
                           step: '00:30',
                           end:  '22:00'
                           }"
            placeholder="选择结束时间">
          </el-time-select>
        </el-form-item>
        <el-form-item label="余量" prop="remain">
          <el-input v-model="addSpace.remain"></el-input>
        </el-form-item>
      </el-form>
      <!--底部-->
      <span slot="footer" class="dialog-footer">
               <el-button @click="add">取 消</el-button>
               <el-button @click="reset" type="danger">重 置</el-button>
               <el-button type="primary" @click="checkPass">添 加</el-button>
        </span>
    </el-dialog>

    <!-- 编辑余量-->
    <el-dialog
      title="请输入新的余量" :visible.sync="isEditRemain" width="30%" :before-close="close">
      <el-input v-model="remain"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="sendEdit">确 定</el-button>
       </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Space",
  data() {
    const checkTime = (rule, value, callback) => {
      if (this.startTime === "" && this.endTime === "") {
        return callback("时间不能为空")
      }
      if (this.startTime >= this.endTime) {
        return callback("请选择正确时间或补充完整时间")
      }
      callback();
    }

    const checkString = (rule, value, callback) => {
      if (value.trim().length < 3) {
        return callback("字符串长度最少大于3")
      }
      callback();
    }

    const checkNum = (rule, value, callback) => {
      const num = parseInt(value)
      if (isNaN(num)) {
        return callback("请输入数字")
      }
      callback();
    }

    const checkSpaceNO = (rule, value, callback) => {
      if (/.*[\u4e00-\u9fa5]+.*$/.test(value) && value.trim.length <= 3) {
        return callback("场地号不能含有中文且长度最少大于3")
      }
      callback();
    }

    const checkDate = (rule, value, callback) => {
      const date = new Date();
      let mon = date.getMonth() + 1;
      let day = date.getDate();
      const curDate = date.getFullYear() + "-" + (mon < 10 ? "0" + mon : mon) + "-" + (day < 10 ? "0" + day : day)
      if (value < curDate) {
        return callback("日期不符合要求")
      }
      callback();
    }
    return {
      queryInfo: {
        name: null,
        time: null,
        data: null,
        cost: null,
      },
      isEditRemain: false,
      init: {
        name: [],
        time: [],
      },
      remain: null,
      editId: null,
      queryList: [],
      pageNum: 1,
      pageSize: 7,
      total: 0,
      isAdd: false,
      startTime: "",
      endTime: "",
      addSpace: {
        no: "",
        name: "",
        site: "",
        cost: 0,
        data: "",
        time: this.startTime + "-" + this.endTime,
        remain: 0,
      },
      addFormRule: {
        time: [
          {validator: checkTime, trigger: 'blur', required: true,}
        ],
        remain: [
          {required: true, validator: checkNum}
        ],
        cost: [
          {required: true, validator: checkNum}
        ],
        data: [
          {required: true, validator: checkDate}
        ],
        no: [
          {required: true, validator: checkSpaceNO}
        ],
        name: [
          {required: true, validator: checkString}
        ],
        site: [
          {required: true, validator: checkString}
        ],
      }
    }
  },
  created() {
    this.$http.get("/user/init",).then(res => {
      if (res.data.code === 200) {
        this.init.name = res.data.data.type;
        this.init.time = res.data.data.time;
      } else {
        this.$message.error(res.data.msg)
      }
    }).catch(err => {
      console.log(err);
    })
    this.query(1, this.pageSize, this.queryInfo)
  },

  methods: {
    update(id) {
      this.editId = id
      this.isEditRemain = true
    },
    remove(id) {
      this.$confirm('此操作将删除该场地, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get("/admin/removeSpace", {
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.$message.success("删除成功")
            this.handleCurrentChange()
            return
          }
          this.$message.error("变更失败")
        }).catch(err => {
          console.log(err);
        })
      })
    },
    query(pageNum, pageSize, queryInfo) {
      this.$http.get("/admin/searchSpace", {
        params: {
          queryInfo, pageNum, pageSize
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.queryList = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(err => {
        this.$message.error("数据加载失败")
      })
    },
    close() {
      this.editId = null
      this.remain = null
      this.isEditRemain = false
    },
    reset(type) {
      if (type === 1) {
        this.queryInfo.time = null;
        this.queryInfo.data = null;
        this.queryInfo.cost = null;
        this.queryInfo.name = null;
      } else {
        this.$refs.addSpace.resetFields()
      }
    },
    checkPass() {
      this.$refs.addSpace.validate(res => {
        if (res) {
          this.sendAddSpace()

        }
      });
    },
    sendEdit() {
      if (this.remain !== null && this.editId !== null) {
        axios.get("/admin/editRemain", {
          params: {
            remain: this.remain,
            id: this.editId
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.$message.success("变更成功")
            this.handleCurrentChange();
          } else {
            this.$message.error("变更失败")
          }
        }).catch(err => {
          console.log(err);
        })

        /* send */
        this.close();
      } else {
        this.$message.error("不能为空！")
      }
    },
    add() {
      this.isAdd = !this.isAdd;
    },
    sendAddSpace() {
      this.addSpace.time = this.startTime + "-" + this.endTime;
      this.addSpace.remain = parseInt(this.addSpace.remain);
      this.addSpace.cost = parseInt(this.addSpace.cost);
      console.log(this.addSpace)
      axios.get("/admin/addSpace", {
        params: {
          no: this.addSpace.no,
          name: this.addSpace.name,
          site: this.addSpace.site,
          cost: this.addSpace.cost,
          data: this.addSpace.data,
          time: this.addSpace.time,
          remain: this.addSpace.remain,
        }
      }).then(res => {
        const response = res.data;
        if (response.code === 200) {
          this.$message.success("添加成功");
        } else {
          this.$message.error("添加失败");
        }
        this.add();
      }).catch(err => {
        console.log(err);
        this.add();
      })
    },
    handleCurrentChange() {
      this.query(this.pageNum, this.pageSize, this.queryInfo)
    }
  }
}
</script>

<style scoped>
/*.el-input {
  width: 200px;
  margin: 20px;
}*/
</style>
